<template>
  <h3>子组件</h3>
  <MhyBorder>
    <Mhyoption placeholder="选择一个选项">
      <!-- 通过插槽传递选项 -->
      <li @click="selectOption('选项1')">选项1</li>
      <li @click="selectOption('选项2')">选项2</li>
      <li @click="selectOption('选项3')">选项3</li>
    </Mhyoption>
    <p>当前选中的选项：{{ selectedOption }}</p>
  </MhyBorder>
  <MhyBorder border="success">盒子2</MhyBorder>
  <MhyBorder border="warning">盒子3</MhyBorder>
</template>
<script setup>
import Mhyoption from "../components/option.vue";
import MhyBorder from "../components/border.vue";
import { ref } from "vue";

// 当前选中的选项
const selectedOption = ref("");

// 选择选项的方法
const selectOption = (option) => {
  selectedOption.value = option;
};
</script>
<style scoped></style>
